<%= container do |c| %>
  <% c.sidebar class: "order-first" do %>
    <h2>Tabs</h2>
  <% end %>

  <div class="p-3" style="background-color: #f3f3f3;">
    <ul class="nav nav-tabs" data-controller="tabs">
      <li class="nav-item">
        <%= link_to "First", "#tab-first", class: "nav-link active", role: "tab", data: { bs_toggle: "tab" } %>
      </li>
      <li class="nav-item">
        <%= link_to "#tab-second", class: "nav-link", role: "tab", data: { bs_toggle: "tab" } do %>
          Second
          <span class="badge badge-primary">Badge</span>
        <% end %>
      </li>
      <li class="nav-item">
        <%= link_to "#tab-third", class: "nav-link", role: "tab", data: { bs_toggle: "tab" } do %>
          Third
          <span class="badge badge-danger badge-pill">3</span>
        <% end %>
      </li>

      <li class="nav-item align-right">
        <%= link_to icon("fa fa-list-alt"), "#tab-sidebar", class: "nav-link", role: "tab", data: { bs_toggle: "tab" } %>
      </li>
    </ul>
  </div>
<% end %>
